<template>
    <div class="app-view">
        <!--导航栏 -->
        <navbar class="header"  :title="$route.meta.title" :arrow="$route.meta.arrow" :icon="$route.meta.icon" />
          <loading v-show="$store.state.loading" />
        <transition :name="transitionName">
            <router-view  :class="$route.meta.arrow==false?'child-view':'child-views'"></router-view>
        </transition>
        <!--引入底部导航组件 利用路由里面设置的meta参数来控制其显示-->
        <Tabbar class="header"  v-if="$route.meta.TabbarShow"></Tabbar>
    </div>
</template>

<script>
    import navbar from "@/components/navbar/navbar";
    import Tabbar from "@/components/tabbar/tabbar";
    import loading from "@/components/loading/loading";
    export default {
        components:{
            navbar,
            Tabbar,
            loading
        },
        name: "pageTransition",
        data(){
            return{
                transitionName:'slide-left'
            }
        },
        watch: {
            $route(to, from) {
                let isBack = this.$router.isBack
                console.log(isBack);
                if(isBack){
                    //设置动画名称
                    this.transitionName = 'slide-right';
                }else{
                    this.transitionName = 'slide-left';
                }
                this.$router.isBack = false;
            }
        },
    }
</script>

<style lang="scss" scoped>
    .app-view{
        position: relative;
    }
    .child-view {
        /*padding-top: 2.8rem;*/
        padding-bottom: 2rem;
        background-color:rgba(243,243,243,0.95);
        position: absolute;
        width:100%;
        transition: all .8s cubic-bezier(.55,0,.1,1);
    }
    .child-views {
        padding-bottom:0;
        background-color:rgba(243,243,243,0.95);
        position: absolute;
        width:100%;
        transition: all .8s cubic-bezier(.55,0,.1,1);
    }
    /*.slide-left-leave-active, .slide-right-enter {*/
    /*    opacity: 0;*/
    /*    -webkit-transform: translate(-100px, 0);*/
    /*    transform: translate(-100px, 0);*/
    /*}*/

    .slide-right-enter-active,
    .slide-right-leave-active,
    .slide-left-enter-active,
    .slide-left-leave-active {
        will-change: transform;
        transition: all 500ms;
        position: absolute;
    }
    .slide-right-enter {
        opacity: 0;
        transform: translate3d(-100%, 0, 0);
    }
    .slide-right-leave-active {
        opacity: 0;
        transform: translate3d(100%, 0, 0);
    }
    .slide-left-enter {
        opacity: 0;
        transform: translate3d(100%, 0, 0);
    }
    .slide-left-leave-active {
        opacity: 0;
        transform: translate3d(-100%, 0, 0);
    }

    .header {
        /*position:absolute;*/
        width:100%;
        /*opacity: 0.3;*/
    }
</style>
